<template>
  <div>
    echarts统计数据
    <!-- 时间选择器，选择时间范围后提交查询请求 -->
    <div>
      <el-date-picker
        v-model="begin"
        type="date"
        placeholder="选择开始日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      -
      <el-date-picker
        v-model="end"
        type="date"
        placeholder="选择截止日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button @click="initData">开始查询</el-button>
    </div>
    <div>
      <el-row>
        <el-col :span="12"
          ><div id="loginDiv" style="height: 500px"></div
        ></el-col>
        <el-col :span="12">
          <div id="registDiv" style="height: 500px"></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import statisticsApi from "@/api/statistics";
import * as echarts from "echarts";
export default {
  data() {
    return {
      loginDates: [],
      loginCounts: [],
      registDates: [],
      registCounts: [],
      begin: "",
      end: "",
    };
  },
  //   mounted() {
  //     this.initData();
  //   },
  methods: {
    initEcharts(id, xData, yData, title) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: title,
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: yData,
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
    initData() {
      statisticsApi.list(this.begin, this.end).then((r) => {
        this.loginDates = r.data.loginDates;
        this.loginCounts = r.data.logiCounts;
        this.registDates = r.data.registDates;
        this.registCounts = r.data.registCounts;
        //查询到统计数据后 再初始化echarts
        //初始化登录的echarts
        this.initEcharts(
          "loginDiv",
          this.loginDates,
          this.loginCounts,
          "登录统计数据"
        );
        this.initEcharts(
          "registDiv",
          this.registDates,
          this.registCounts,
          "注册统计数据"
        );
      });
    },
  },
};
</script>
